import { useTheme } from '@react-navigation/native';
import React, { useEffect, useState } from 'react';
import { View, StatusBar, Text } from 'react-native';
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import { login, TYPES } from '@/actions/UserActions';
import { strings } from '@/localization';
import { styles } from '@/screens/Login/Login.styles';
import { errorsSelector } from '@/selectors/ErrorSelectors';
import { isLoadingSelector } from '@/selectors/StatusSelectors';
import { shadow } from '@/theme';
import { Icon, Image } from '@rneui/themed';
import { setLang } from '@/localization/Localization';
import { LangSetting } from './components/LangSetting';

export function Login() {
  const { colors } = useTheme();
  const dispatch = useDispatch();
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const errors = useSelector((state) => errorsSelector([TYPES.LOGIN], state), shallowEqual);
  const isLoading = useSelector((state) => isLoadingSelector([TYPES.LOGIN], state));

  const handleSubmit = () => {
    dispatch(login(username, password));
  };

  const [checked, setChecked] = useState(false);

  useEffect(() => {
    if (checked) {
      setLang('en');
    } else {
      setLang('zh');
    }
  }, [checked]);

  return (
    <View style={styles.container}>
      <LangSetting></LangSetting>
      <Image containerStyle={styles.bgImage} source={require('@/assets/image/loginBg.jpg')}></Image>
      <View style={[styles.formContainer, shadow.primary, { backgroundColor: colors.primary }]}>
        <Text>1</Text>
      </View>
    </View>
  );
}
